<template>
  <div class="single">
    <div class="container">
      <!----top-header---->
      <div class="top-header">
        <!-- <div class="clearfix"> </div> -->
      </div>
      <!---导航菜单---->
      <div class="top-header-nav">
        <nav class="top-nav main-menu">
          <ul class="top-nav">
            <li><a href="#" @click="sendIndex">首页</a><span> </span></li>
            <li><a href="#" @click="sendSingle">产品</a><span> </span></li>
            <li><a href="#">服务</a><span> </span></li>
            <li><a href="#">品牌</a><span> </span></li>
            <li><a href="#">关于我们</a></li>
            <div class="clearfix"></div>
          </ul>
          <a href="#" id="pull"
            ><img src="../../images/nav-icon.png" title="menu"
          /></a>
        </nav>
        <!---搜索--->
        <div class="top-header-search-box">
          <!-- <form @submit.native.prevent> -->
          <!-- required要求不能为空 maxlength限制输入长度 -->
          <input type="text" required maxlength="22" />
          <input type="submit" value=" " />
          <!-- </form> -->
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <!--筛选-->
    <div class="content">
      <div class="container">
        <!-- 筛选 -->
        <div class="products">
          <div class="product-filter">
            <h1><a href="#">等待发货{{list.length}}</a></h1>
            <div class="product-filter-grids">
              <!-- 引用element-ui -->
              <el-container v-for="item in list" :key="item.id">
                <el-aside width="200px">
                    <img :src="item.goods_img2" alt="">
                    <!-- <el-divider></el-divider> -->
                </el-aside>
                <el-main >
                    <!-- 待发货信息 -->
                    <el-descriptions direction="vertical" :column="4" border>
                        <el-descriptions-item label="用户名">{{item.user}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{item.tel}}</el-descriptions-item>
                        <el-descriptions-item label="居住地" :span="2">{{item.expressage}}</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">{{item.remark}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系地址">{{ item.address }}</el-descriptions-item>
                    </el-descriptions>
                    
                </el-main>
                
            </el-container>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
  data() {
      return {
        list:[
            {user:'张三', tel:'10086', expressage:'顺丰', goods_img2: 'https://www.escook.cn/vuebase/pics/2.png', remark:'白色', address:'广东省广州市增城区'}
        ]
        }
    },
    methods:{
        // 跳转到首页
        sendIndex(){
        this.$router.push('/index')
        },
        // 跳转到产品
        sendSingle(){
            this.$router.push('/single')
        },
    },
    created(){
        bus.$on('message', val =>{
        // console.log(val);
        this.$set(this.list, 1, val)
        })
    }
}
</script>

<style scoped>
@import "../../css/style.css";
@import "../../css/bootstrap.css";
/* element-ui布局 */
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>